<template>
  <div class='container'>
    <el-card class="box-card">
      <!-- 搜索栏 -->
        <el-form :inline="true" :model="formDate"  ref="formDates" >
          <el-form-item label="关键字" prop="search">
            <el-input placeholder="根据编号搜索" v-model.trim="formDate.keyword"></el-input>
          </el-form-item>
          <!-- 按钮 -->
            <el-form-item class="btn">
             <el-button @click="reset"> 重置 </el-button>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>

        </el-form>
      <!-- 顶部灰条 -->
        <div class="el-alert">
          <div class="el-icon-info" />
          <div class="content">共{{total}}条记录</div>
        </div>
        <!-- 中间内容 -->
           <el-table
             :data="tableData"
             style="width: 100%"
             >
             <el-table-column
               prop="id"
               label="编号"
               width="200">
             </el-table-column>
             <el-table-column
               prop="questionType"
               label="题型"
               align="center"
               width="140">
               <template v-slot="{row}">
                 {{title(row)}}
               </template>
             </el-table-column>
             <el-table-column
               prop="questionIDs"
               label="题目编号"
               >
               <template v-slot="{row}">
                 <el-link @click="onClickquestions(row)" :underline="false" v-for="item in row.questionIDs" :key="item.number" type="primary">{{item.number}}</el-link>
               </template>
             </el-table-column>
              <el-table-column
               prop="addTime"
               label="录入时间"
               width="100">
             </el-table-column>
             <el-table-column
               prop="totalSeconds"
               label="答题时间(s)">
             </el-table-column>
              <el-table-column
               prop="accuracyRate"
               label="正确率(%)">
             </el-table-column>
             <el-table-column
               prop="userName"
               label="录入人">
             </el-table-column>
              <el-table-column
               label="操作"
               width="60">
              <template v-slot="{row}">
                 <el-button type="danger" icon="el-icon-delete" circle @click="onDel(row)"></el-button>
              </template>
             </el-table-column>
           </el-table>
        <h2 v-if="isShowTip">没有搜索到匹配结果</h2>
      <!-- 底部分页 -->
     <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="  prev, pager,next, sizes,jumper"
      :page-sizes="[20, 30, 50, 100]"
      :total="total"
       >
     </el-pagination>
    </el-card>
    <QuestionsPreview v-if="dialog" v-model="dialog" :topicInfo="topicInfo" />
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions.js'
import QuestionsPreview from '@/module-hmmm/components/questions-preview'
import { questionType } from '@/api/hmmm/constants.js'
export default {
  name: 'QuestionsItem',
  data () {
    return {
      tableData: [],
      page: {
        page: 1,
        pagesize: 10
      },
      formDate: {
        page: 1,
        pagesize: 10,
        keyword: ''
      },
      total: 0,
      deviceList: [],
      resultList: [],
      isShowTip: false,
      dialog: false,
      topicInfo: {}
    }
  },
  created () {
    this.loadrandoms()
  },
  methods: {
    //  分页数据
    handleCurrentChange (val) {
      this.page.page = val
      this.loadrandoms()
    },
    handleSizeChange (val) {
      this.page.pagesize = val
      this.loadrandoms()
    },
    // 加载列表
    async loadrandoms () {
      const res = await randoms(this.page)
      this.tableData = res.data.items
      this.total = res.data.counts
    },

    // 关键词重置
    reset () {
      this.formDate = {}
      this.loadrandoms()
    },
    // 搜索
    async search () {
      const res = await randoms(this.formDate)
      this.tableData = res.data.items
      this.total = res.data.counts
    },

    // 删除 (有错误不生效)
    onDel (row) {
      this.$confirm('此操作将永久删除该题组,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await removeRandoms(row)
        this.$message.success('删除成功')
        this.loadrandoms()
      }).catch(() => {})
    },
    onClickquestions (row) {
      this.dialog = true
      this.topicInfo = row
    },
    title (row) {
      const arr = questionType.filter(item => row.questionType === (item.value + ''))
      return arr[0].label
    }
  },
  components: { QuestionsPreview }
}
</script>

<style scoped lang='scss'>
.container{
  padding: 20px;
}
.btn{
  margin-left: 50px;
  float: right;
}
  .el-alert{
    margin-bottom: 20px;
    background-color: #f4f4f5;
    }
    .el-icon-info{
      color:#909399;
      font-size: 14px;
      width: 16px;
    }
       .content{
       display: table-cell;
       padding: 0 8px;
       font-size: 14px;
       color:#909399;
      }
      //翻页
         .el-pagination{
      text-align: right;
      white-space: nowrap;
      padding: 25px 5px;
      color: #303133;
      font-weight: 700;
    }
</style>
